<template>
  <div class="follow">
    <div class="header">
      <van-nav-bar title="我的关注" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="list">
      <div
        class="item"
        v-for="follow in followList"
        @click="toUserinfo(follow.userinfo.id)"
      >
        <div class="left">
          <div class="avatar">
            <img :src="follow.userinfo.avatar" alt="" />
          </div>
          <div class="user">
            <div class="name">{{ follow.userinfo.username }}</div>
            <div class="text">
              <span>{{ follow.role }}</span>
              <!-- <span>粉丝</span>
              <span>22</span> -->
            </div>
          </div>
        </div>

        <div class="state" @click.stop="removeFollow(follow.userinfo.id)">
          已关注
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// const userinfo = JSON.parse(localStorage.getItem("userinfo"))[0] || ref([]);
const followList = ref(JSON.parse(localStorage.getItem("followList")) || []);
const arr = ref(JSON.parse(localStorage.getItem("arr")) || []);

const onClickLeft = () => history.back();

function toUserinfo(id) {
  router.push({
    path: "/userinfo",
    query: {
      id,
    },
  });
}

function removeFollow(id) {
  followList.value = followList.value.filter((o) => o.userinfo.id != id);
  arr.value = arr.value.filter((o) => o != id);
  localStorage.setItem("followList", JSON.stringify(followList.value));
  localStorage.setItem("arr", JSON.stringify(arr.value));
}
</script>

<style lang="scss" scoped>
.follow {
  .header {
    .van-nav-bar {
      border-bottom: 2rem solid #fbfbfb;
    }
    .van-nav-bar:deep(.van-nav-bar__left) {
      padding: 0 20rem;
    }
    .van-nav-bar:deep(.van-icon) {
      color: #000;
      font-size: 22rem;
    }
  }
  .list {
    padding: 0 20rem;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2rem solid #fbfbfb;
      padding: 15rem 0;
      .left {
        display: flex;
        align-items: center;
        .avatar {
          margin-right: 10rem;
          img {
            width: 50rem;
            height: 50rem;
            border-radius: 50%;
          }
        }
        .user {
          .name {
            font-size: 14rem;
            color: #000;
            margin-bottom: 5rem;
          }
          .text {
            font-size: 12rem;
            color: #999;
            span {
              margin-right: 2rem;
            }
          }
        }
      }
      .state {
        font-size: 14rem;
        color: #a3a3a3;
        padding: 5rem 15rem;
        border-radius: 15rem;
        background-color: #f0f0f0;
      }
    }
  }
}
</style>